/*
* @Author: Choisaaaa
* @Date: 2018/5/5  11:41
* 订单详情 组件
*/
import "./order-detail.scss"
import React from "react";

import PageTitle from 'component/page-title/page-title.jsx';
import TableList from 'util/table-list/table-list.jsx';

import MUtil from 'util/mm.jsx'
import Order from 'service/order-service.jsx'
const _mm = new MUtil();
const _order = new Order();

class OrderDetail extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            orderNumber : this.props.match.params.orderNumber,
            orderInfo : {}
        }
    }
    componentDidMount(){
        this.loadOrderDetail();
    }
    loadOrderDetail() {//加载订单详情
        let orderNumber = this.state.orderNumber;
        if (orderNumber) {
            _order.getOrderDetail(orderNumber).then((res)=> {
                this.setState({
                    orderInfo: res
                });
            }, (errMsg)=> {
                _mm.errorTips(errMsg)
            });
        }
    }
    onSendGoods(e){//对已支付的订单进行发货处理
        if(window.confirm('是否确认该订单已经发货？')){
            _order.sendGoods(this.state.orderNumber).then((res) => {
                _mm.successTips('发货成功');
                this.loadOrderDetail();
            }, (errMsg) => {
                _mm.errorTips(errMsg);
            });
        }
    }
    render(){
        let receiverInfo = this.state.orderInfo.shippingVo || {},
            productList = this.state.orderInfo.orderItemVoList || [];
        let tableHeader = [
            {name : "商品图片" ,width : "10%"},
            {name : "商品信息" ,width : "45%"},
            {name : "单价" ,width : "15%"},
            {name : "数量" ,width : "15%"},
            {name : "合计" ,width : "15%"},
        ];
        let ListBody = productList.map((product,index) => {
            return(
                <tr key={index}>
                    <td>
                        <img className="p-img"  alt={product.productName}
                             src={`${this.state.orderInfo.imageHost}${product.productImage}`}/>                    </td>
                    <td>{product.productName}</td>
                    <td>￥{product.currentUnitPrice}</td>
                    <td>{product.quantity}</td>
                    <td>￥{product.totalPrice}</td>
                </tr>
            )
        });
        return (
            <div id="page-wrapper">
                <PageTitle title="订单详情" />
                <div className="form-horizontal">
                    <div className="form-group">
                        <label className="col-md-2 control-label">订单号</label>
                        <div className="col-md-5">
                            <p className="form-control-static">{this.state.orderInfo.orderNo}</p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">创建时间</label>
                        <div className="col-md-5">
                            <p className="form-control-static">{this.state.orderInfo.createTime}</p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">收件人</label>
                        <div className="col-md-5">
                            <p className="form-control-static">
                                {receiverInfo.receiverName}，
                                {receiverInfo.receiverProvince}
                                {receiverInfo.receiverCity}
                                {receiverInfo.receiverAddress}
                                {receiverInfo.receiverMobile || receiverInfo.receiverPhone}
                            </p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">订单状态</label>
                        <div className="col-md-5">
                            <p className="form-control-static">
                                {this.state.orderInfo.statusDesc}
                                {
                                    /*this.state.orderInfo.status === 20
                                        ? <button className="btn btn-default btn-sm btn-send-goods"
                                                  onClick={(e) => {this.onSendGoods(e)}}>立即发货</button>
                                        : null*/
                                }
                            </p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">支付方式</label>
                        <div className="col-md-5">
                            <p className="form-control-static">
                                {this.state.orderInfo.paymentTypeDesc}
                            </p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">订单金额</label>
                        <div className="col-md-5">
                            <p className="form-control-static">
                                ￥{this.state.orderInfo.payment}
                            </p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品列表</label>
                        <div className="col-md-10">
                            <TableList tableHeads={tableHeader}>
                                {ListBody}
                            </TableList>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}
export  default OrderDetail;